<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>首页</title>
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  <link href="/static/css/style.css" rel="stylesheet"/>
</head>
<body>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <!-- Tab panes -->
      <div class="tab-content">
        <!--首页页面-->
        <div role="tabpanel" class="tab-pane active" id="home">
          <div class="row">
            <div class="col-xs-12" style="text-align: center; height: 50px"><h3>选择接单</h3></div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <section class="aui-scrollView">
                <div class="aui-order-title" id="orderWaiting">
                </div>
              </section>
            </div>
          </div>
        </div>

        <!--订单页面-->
        <div role="tabpanel" class="tab-pane" id="order">
          <div class="row">
            <div class="col-xs-12" style="text-align: center; height: 50px"><h3>订单记录</h3></div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <div class="row">
                <div class="col-xs-12">
                  <!--订单页导航条-->
                  <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#ongoing" aria-controls="home" role="tab"
                                                              data-toggle="tab" id="ongoing_nav">进行中</a></li>
                    <li role="presentation"><a href="#completed" aria-controls="profile" role="tab"
                                               data-toggle="tab" id="completed_nav">已完成</a></li>
                  </ul>
                </div>
              </div>
              <div class="row">
                <div class="col-xs-12">
                  <!-- Tab panes -->
                  <div class="tab-content">
                    <!--进行中的订单-->
                    <div role="tabpanel" class="tab-pane active" id="ongoing">
                      <section class="aui-scrollView">
                        <div class="aui-order-title" id="orderOngoing">
                        </div>
                      </section>
                    </div>

                    <!--已完成的订单-->
                    <div role="tabpanel" class="tab-pane" id="completed">
                      <section class="aui-scrollView">
                        <div class="aui-order-title" id="orderCompleted">
                        </div>
                      </section>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--我的页面-->
        <div role="tabpanel" class="tab-pane" id="my">
          <div class="row">
            <div class="col-xs-12" style="text-align: center; height: 50px"><h3>我的</h3></div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <div class="row" style="background-color: #eeeeee;">
                <div class="col-xs-2">
                  <img src="/static/driver_pic/default.webp" alt="" id="driver_img"
                       style="width:50px; height:50px; border-radius:25px">
                </div>
                <div class="col-xs-10" id="driver_name">-</div>
              </div>
              <hr>
              <div class="row">
                <div class="col-xs-12" style="background-color: #eeeeee; margin-bottom: 5px" id="myInfo_btn">个人资料</div>
              </div>
              <div class="row">
                <div class="col-xs-12" style="background-color: #eeeeee" id="reg_btn">司机注册</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <!--底部导航条-->
      <nav class="navbar navbar-default navbar-fixed-bottom">
        <ul class="nav nav-pills" role="tablist">
          <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab"
                                                    id="home_nav"><span
              class="mdi mdi-home"></span>首页</a></li>
          <li role="presentation"><a href="#order" aria-controls="order" role="tab" data-toggle="tab"
                                     id="order_nav"><span
              class="mdi mdi-note"></span>订单</a></li>
          <li role="presentation"><a href="#my" aria-controls="order" role="tab" data-toggle="tab" id="my_nav"><span
              class="mdi mdi-account"></span>我的</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>



<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/static/js/lightyear.js"></script>
<script src="/static/js/mycommons.js"></script>
<script>
  let openid = 'oBIxH683cFic16uvYKkcBwuaJsJY', verify = -1, driver_status, driver_id
  $(function () {
    // 获取openid
    let code = getUrlParam("code")
    $.post("/wx/getOpenId", {code: code}, function (res) {
      if (res != null && res !== "") {
        openid = res
      } else {
        // $("body").html("<h1>为了更好的为您提供服务，请关注“极安物流”微信公众号办理业务</h1>")
      }
    })

    //发送请求查询司机状态
    $.ajax({
      url: "/wx/driver/" + openid,
      type: 'GET',
      async: false,
      success(res) {
        if (res.flag) {
          verify = res.data.verify
          driver_status = res.data.status
          driver_id = res.data.id
          if (verify === 1) {
            //填充我的页面信息
            $("#driver_img").attr("src", '/static/driver_pic/' + res.data.pic)
            $("#driver_name").text(res.data.name)
          }
        } else {
          $("#orderWaiting").html("<div style='text-align: center'><h1>您还未注册，请注册后接单</h1><button class='btn btn-warning to_reg_page'>去注册</button></div>")
        }
      }
    })

    getAllWaitingOrders()
    //每半分钟更新一次订单信息
    setInterval(function () {
      getAllWaitingOrders()
    }, 30000)
  })

  //获取url中的参数
  function getUrlParam(name) {
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    let r = window.location.search.substr(1).match(reg);  //匹配目标参数
    if (r != null) return unescape(r[2]);
    return null; //返回参数值
  }

  //点击司机注册
  $("#reg_btn").click(function () {
    if (verify === 1 && driver_status !== 2) {
      msgNotify('您已经注册了', 'success', 1500)
    } else if (driver_status === 2) {
      msgNotify('您已被管理员禁用，不可注册', 'danger', 1500)
    } else {
      window.location.href = "/wx/driver_add?openid=" + openid
    }
  })

  //获取所有待接单的订单
  function getAllWaitingOrders() {
    if (verify !== 1 && driver_status !== 2) {
      $("#orderWaiting").html("<div style='text-align: center'><h1>您还未注册，请注册后接单</h1><button class='btn btn-warning to_reg_page'>去注册</button></div>")
    } else if (driver_status === 2) {
      $("#orderWaiting").html("<div style='text-align: center'><h1>您已被管理员禁用，不可接单</h1></div>")
    } else {
      $.get("/wx/orders", {}, function (res) {
        if (res.flag) {
          fillOrders(res.data, "#orderWaiting")
        }
      })
    }
  }

  //监听去注册按钮点击事件
  $(document).on('click', '.to_reg_page', function () {
    $("#reg_btn").click()
  })

  //填充订单数据
  function fillOrders(list, ele) {
    if (list.length > 0) {
      let orderListStr = ""
      $.each(list, function () {
        let orderStr = "<div class=\"aui-order-box order_detail\">\n" +
            "      <a href=\"javascript:void(0);\" class=\"aui-well-item\">\n" +
            "        <div class=\"aui-well-item-bd\">\n" +
            "<input type='text' class='hidden' value='" + this.id + "'>" +
            "<input type='text' class='hidden' value='" + this.status + "'>" +
            "          <p class=\"aui-order-fl aui-order-time\">" + formatTimeObj(this.appointmentTime) + "</p>\n" +
            "        </div>\n" +
            "      </a>\n" +
            "      <hr>\n" +
            "      <p class=\"aui-order-fl aui-order-address\">" + this.startPoint + "</p>\n" +
            "      <p class=\"aui-order-fl aui-order-door\">" + this.endPoint + "</p>\n" +
            "      <hr>\n" +
            "      <p>" + this.carType.name + "</p>\n" +
            "    </div>"
        orderListStr += orderStr
      })
      $(ele).html(orderListStr)
    } else {
      $(ele).html("<div style='text-align: center'><h1>暂无订单</h1></div>")
    }
  }

  //首页点击事件
  $("#home_nav").click(function () {
    getAllWaitingOrders()
  })

  //格式化订单显示时间
  function formatTimeObj(datetime) {
    let nowYear = new Date().getFullYear()
    let year = datetime.year
    let month = datetime.monthValue.toString().padStart(2, '0')
    let day = datetime.dayOfMonth.toString().padStart(2, '0')
    let hour = datetime.hour.toString().padStart(2, '0')
    let minute = datetime.minute.toString().padStart(2, '0')
    //如果是今年的订单，则不显示年份
    if (year === nowYear) {
      return month + "月" + day + "日 " + hour + ":" + minute
    } else {
      return year + "年" + month + "月" + day + "日 " + hour + ":" + minute
    }
  }

  //点击底部订单导航触发事件
  $("#order_nav").click(function (res) {
    getOrdersByDidAndStatus(1, "#orderOngoing")
  })

  //点击订单页面顶部导航触发事件
  $("#ongoing_nav").click(function (res) {
    getOrdersByDidAndStatus(1, "#orderOngoing")
  })
  $("#completed_nav").click(function (res) {
    getOrdersByDidAndStatus(2, "#orderCompleted")
  })

  //根据openid和订单状态查询订单
  function getOrdersByDidAndStatus(status, ele) {
    $.get("/wx/driver/order", {openid: openid, status: status}, function (res) {
      if (res.flag) {
        fillOrders(res.data, ele)
      } else {
        $(ele).html("<div style='text-align: center'><h1>暂无订单</h1></div>")
      }
    })
  }

  //监听订单点击，查看订单详情
  $(document).on("click", ".order_detail", function () {
    let id = $(this).find("input:eq(0)").val()
    let status = $(this).find("input:eq(1)").val()
    window.location.href = "/wx/order_detail?id=" + id + "&status=" + status + "&dId=" + driver_id
  })

  //监听点击个人信息
  $("#myInfo_btn").click(function () {
    if (verify !== 1 && driver_status !== 2) {
      msgNotify("您还未注册，请先注册", 'warning', 1500)
    } else if (driver_status === 2) {
      msgNotify('您已被管理员禁用，不可进行操作', 'danger', 1500)
    } else {
      window.location.href = "/wx/driver_detail?openid=" + openid
    }
  })
</script>
</body>
</html>